import React, { Suspense } from "react";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import { Spin } from "antd";
import RouterGuard from "./RouterGuard";
import Layout from "../components/Layout";
import { routes, type CustomRoute } from "./routes";

// 简洁的加载中组件
const PageLoading = () => (
  <div className="flex items-center justify-center min-h-96">
    <Spin size="large" />
  </div>
);

// 根布局组件
const RootLayout = () => (
  <RouterGuard>
    <Layout>
      <Suspense fallback={<PageLoading />}>
        <Outlet />
      </Suspense>
    </Layout>
  </RouterGuard>
);

// 创建路由器
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: routes.map((route: CustomRoute) => ({
      path: route.path === "/" ? "" : route.path.startsWith("/") ? route.path.slice(1) : route.path,
      element: route.element,
    })),
  },
]);

// 路由提供者组件
const AppRouter: React.FC = () => {
  return <RouterProvider router={router} />;
};

export default AppRouter;
